<template>
  <view class="searchList">
    <view class="hearder">
      <!-- 搜索 -->
      <view class="search">
        <u-search @search="getsearch" placeholder="搜索商品" height="50" shape="square" :show-action="false" v-model="searchtj.value"></u-search>
      </view>
      <!-- 排序 -->
      <view class="order">
        <view class="ul">
          <view class="li" :class="{active:searchtj.activecount==1}" @click="qiehuan(1)">
            综合
          </view>
          <view class="li sort" :class="{active:searchtj.activecount==2}" @click="xiaoliang(2)">
            销量
            <view class="dasat">
              <view class="iconfontm  icon-sort-up-full:before dasup" :class="{'icon-sort-up-full-active:before':searchtj.is_sort==1}"> </view>
              <view class="iconfontm icon-sort-down-full-copy:before dasdown" :class="{'icon-sort-down-full-active:before':searchtj.is_sort==2}"> </view>
            </view>
          </view>
          <view class="li sort" :class="{active:searchtj.activecount==3}" @click="jiagepx(3)">
            价格
            <view class="dasat">
             <view class="dasat">
               <view class="iconfontm  icon-sort-up-full:before dasup" :class="{'icon-sort-up-full-active:before':searchtj.is_price==1}"> </view>
               <view class="iconfontm icon-sort-down-full-copy:before dasdown" :class="{'icon-sort-down-full-active:before':searchtj.is_price==2}"> </view>
             </view>
            </view>
          </view>
          <view class="li" @click="show=true">
            筛选
          </view>
        </view>
        <view class="icons" @click="changelow">
          <view class="iconfont " :class="islow?'icon-liebiaoshipailie:beforee':'icon-gonggepailie:befor'">
          </view>
        </view>
      </view>
    </view>

    <!-- 弹出框 -->
    <u-popup v-model="show" mode="right" :closeable="true" >
      <view class="tul">
        <view class="tli">
          <view class="btitle">
            灯具类型
          </view>
          <view class="ulte">
            <view class="lite" :class="{liteactive:item.id===searchtj.xuanzfl}" v-for="(item,index) in category.list" :key="index" @click="xuanzfl(item.id)">
              {{item.name}}
            </view>
          </view>
        </view>
        <view class="tli">
          <view class="btitle">
            灯具风格分类
          </view>
          <view class="ulte">
            <view class="lite" :class="{liteactive:item.id===searchtj.xuanzfgfl}" v-for="(item,index) in category.fglist" :key="index" @click="xuanzfgfl(item.id)">
              {{item.name}}
            </view>
          </view>
        </view>
        <view class="tli">
          <view class="btitle">
            灯具品牌分类
          </view>
          <view class="ulte">
            <view class="lite" :class="{liteactive:item.id===searchtj.xuanzppfl}"  v-for="(item,index) in category.pplist" :key="index" @click="xuanzppfl(item.id)">
              {{item.name}}
            </view>
          </view>
        </view>
      </view>
      <!-- 确定重置框 -->
      <view class="determine">
        <view class="shaixuan">
          <view class="chongz" @click="reset">
            重置
          </view>
          <view class="queding" @click="close">
            确定
          </view>
        </view>

      </view>
    </u-popup>
    <!-- 商品列表 -->
    <!-- 商品列表 -->
   <view class="" style="margin-top: 500rpx;" v-if="searchlist.list.length===0">
      <u-empty text="搜索不到此内容" mode="list"></u-empty>
   </view>
    <view class="Popularhot" v-else>
      <view class="vul" :class="{'low':islow}">
        <view class="vli" v-for="(item,index) in searchlist.list" :key="index" @click="tiaozhuan(item.id)">
          <view class="vtop">
            <image :src="item.image_url" mode="">
            </image>
          </view>
          <view class="vbottom">
            <view class="lititle">
              {{item.name}}
            </view>
            <view class="price">
              ￥{{item.unit_price}}
            </view>
            <view class="cart">
              <view class="iconfonta icon-gouwuche1:before">
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import {
    reactive,
    ref
  } from 'vue';
  import {
    onLoad
  } from '@dcloudio/uni-app';
  import {
    searchStore
  } from "../../store/search.js"
  const searchstore = searchStore()
  const {
    category,
    searchlist
  } = searchstore

//定义搜索条件
  const searchtj =ref({
    value:"",  //定义搜索关键字
    activecount:1, //定义选中数字
    is_sort:0,//定义销量升序还得倒序判断
    is_price:0 , //定义价格升序还得倒序判断
    xuanzfl:0,//定义选中的分类
    xuanzfgfl:0,//选中风格分类
    xuanzppfl:0//选中品牌分类
  })
  
  onLoad((options) => {
    if(options.value){
        searchtj.value.value = options.value
    } else if(options.xuanzfgfl){
     const  xuanzfgfl= parseInt(options.xuanzfgfl);
          searchtj.value.xuanzfgfl =xuanzfgfl
    } else if(options.xuanzppfl){
     const  xuanzppfl= parseInt(options.xuanzppfl);
          searchtj.value.xuanzppfl =xuanzppfl
    }

    //发送请求获取灯具分类
    searchstore.getcategory()
    //获取搜索列表
    searchstore.getsearchlist(searchtj.value)
  });
 //获取搜索列表
 function getsearch(){
   //获取搜索列表
   searchstore.getsearchlist(searchtj.value)
 }
 //选中分类
 function xuanzfl(id){
   if(id===searchtj.value.xuanzfl){
      searchtj.value.xuanzfl = 0
   }else{
       searchtj.value.xuanzfl = id
   }
 
 }
 //选中风格分类
 function xuanzfgfl(id){
 if(id===searchtj.value.xuanzfgfl){
    searchtj.value.xuanzfgfl = 0
   
 }else{
     searchtj.value.xuanzfgfl = id
 }
  
 }
 //选中品牌分类
 function xuanzppfl(id){
   if(id===searchtj.value.xuanzppfl){
      searchtj.value.xuanzppfl = 0
     
   }else{
       searchtj.value.xuanzppfl = id
   }
 }
 //重置分类
 function reset(){
       searchtj.value.xuanzfl = 0
         searchtj.value.xuanzfgfl = 0
         searchtj.value.xuanzppfl = 0
              
 }
//切换
function qiehuan(count){
    searchtj.value.activecount = count
     searchtj.value.is_sort = 0,
     searchtj.value.is_price = 0,
     //获取搜索列表
     searchstore.getsearchlist(searchtj.value)
}

//销量排序
function xiaoliang(count){
    searchtj.value.activecount = count
      searchtj.value.is_price = 0
    if(count==2 && (searchtj.value.is_sort==0|searchtj.value.is_sort==2 )){
      searchtj.value.is_sort = 1
    }else{
       searchtj.value.is_sort = 2
    }
    //获取搜索列表
    searchstore.getsearchlist(searchtj.value)
}
//价格排序
function jiagepx(count){
  searchtj.value.is_sort = 0,
  searchtj.value.activecount = count
    if(count==3 && ( searchtj.value.is_price==0 | searchtj.value.is_price==2 )){
       searchtj.value.is_price = 1
    }else{
      searchtj.value.is_price = 2
    }
    //获取搜索列表
    searchstore.getsearchlist(searchtj.value)
}
  //跳转详情页面
  function tiaozhuan(goodid){
    uni.navigateTo({
      url: `/subPack/goods_detail/goods_detail?goods_id=${goodid}`
    })
  }
  //定义控制行列的
  const islow = ref(true)
  //转换行列
  function changelow() {
    islow.value = !islow.value
  }

  //定义是否弹出筛选
  const show = ref(false)

  function close() {
    //获取搜索列表
    searchstore.getsearchlist(searchtj.value)
    show.value = false
    // console.log('close');
  }
</script>

<style lang="scss">
  .searchList {

    //头部
    .hearder {
      position: fixed;
      top: 0;
      width: 100%;
      margin-bottom: 100rpx;
      // border: 1px solid red;
      z-index: 10;

      // 搜索
      .search {
        background-color: #fff;
        padding: 0 30rpx;
      }

      // 排序
      .order {
        background-color: #fff;
        display: flex;

        .ul {
          width: 85%;
          display: flex;
          justify-content: space-around;

          .li {
            height: 100rpx;
            line-height: 100rpx;
            // border: 1px solid red;
            color: #565656;

          }

          .active {
            border-bottom: 5rpx solid #ff3c29;
            font-weight: 500;
            color: #ff3c29;
          }

          .sort {
            position: relative;
            display: flex;

            .dasat {
              height: 40rpx;
              display: flex;
              flex-direction: column;
              margin-left: 2rpx;

              .dasup {
                position: absolute;
                top: -5rpx;
                // border: 1px solid red;
              }

              .dasdown {
                position: absolute;
                top: 8rpx;
              }
            }
          }
        }

        .icons {
          height: 100rpx;
          line-height: 100rpx;
          position: relative;
          /* 声明相对定位 */
          left: 30rpx;
        }

        .icons::before {
          content: '';
          position: absolute;
          /* 声明绝对定位 */
          top: 28rpx;
          left: -18rpx;
          width: 2rpx;
          /* 竖线宽度 */
          height: 50%;
          /* 覆盖整个区域 */
          background-color: #dbdbdb;
          /* 竖线颜色 */
          /* 其他样式 */
        }
      }
    }

    //弹出框
    .tul {
      width: 600rpx;
      padding: 30rpx 20rpx;

      .tli {
        .btitle {
          font-weight: 600;
          height: 120rpx;
          line-height: 120rpx;

        }

        .ulte {
          display: flex;
          flex-wrap: wrap;
          text-align: center;

          .lite {
            font-size: 20rpx;
            width: 150rpx;
            height: 60rpx;
            line-height: 60rpx;
            margin: 10rpx 15rpx;
            border-radius: 30rpx;
            background-color: #f5f5f5;
            // border: 1rpx solid #ff4634;
          }
          .liteactive{
            color: #ff4634;
             border: 1rpx solid #ff4634;
          }
        }
      }

    }

    .determine {
      position: fixed;
      width: 100%;
      // border: 1px solid red;

      bottom: 30rpx;
      z-index: 10;

      .shaixuan {
        // border: 1px solid red;
        display: flex;
        margin-left: 40rpx;
        text-align: center;

        .chongz {
          width: 280rpx;
          height: 80rpx;
          line-height: 80rpx;
          border-radius: 40rpx 0 0 40rpx;
          border: 1rpx solid #ebecef;
        }

        .queding {
          width: 280rpx;
          height: 80rpx;
          line-height: 80rpx;
          border-radius: 0 40rpx 40rpx 0;
          color: #fff;
          background-color: #ff3c29;
        }
      }

    }

    //人气热卖
    .Popularhot {
      margin-top: 190rpx;

      .vul {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;

        .vli {
          // border: 1rpx solid red;
          width: 350rpx;
          height: 520rpx;
          border-radius: 10rpx;
          margin-bottom: 20rpx;
          box-shadow: 2rpx 30rpx 30rpx #dadada;
          position: relative;

          .vtop {
            image {
              border-radius: 10rpx 10rpx 0 0;
              width: 350rpx;
              height: 350rpx;
            }
          }

          .vbottom {
            padding: 0 20rpx;

            .lititle {
              color: #000000;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              font-size: 32rpx;
            }

            .price {
              position: absolute;
              bottom: 20rpx;
              font-size: 35rpx;
              color: #f23030;
            }

            .cart {
              position: absolute;
              bottom: 20rpx;
              right: 20rpx;
            }
          }
        }
      }

      .low {
        margin: 0 20rpx;
        border-radius: 10rpx;

        .vli {
          width: 100%;
          height: 260rpx;
          display: flex;
          margin-bottom: 0;
          border-radius: 0;
          // box-shadow: 0;
          background-color: #fff;

          .vtop {
            padding: 20rpx 20rpx;

            // border: 1px solid red;
            image {
              // border: 1px solid red;
              border-radius: 10rpx;
              width: 200rpx;
              height: 220rpx;
            }
          }

          .vbottom {
            border-bottom: 2rpx solid #f3f4f6;

            .lititle {
              margin-top: 30rpx;
            }
          }
        }
      }
    }
  }
</style>